<template>
  <div class="header">
    <div class="maoyan"><span>猫眼电影</span></div>
    <div class="fxzxdy"></div>
    <div class="header_dh">
      <div class="dw">南宁</div>
      <ul>
        <li>热映</li>
        <li>影院</li>
        <li>待映</li>
        <li>经典电影</li>
      </ul>
      <div class="fdj"><a href="#"></a></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header"
}
</script>

<style scoped>
.header {
  width: 100vw;
  height: 160px;
  position: fixed;
  top: 0;
  left: 0;
}

.maoyan {
  width: 100%;
  height: 35px;
  background: red;

}

.maoyan span {
  height: 35px;
  display: inline-block;
  padding: 4px;
  color: white;
  font-size: 0.453rem;
}

.fxzxdy {
  width: 100%;
  height: 60px;
  background: url("../assets/fxzxdy.png");
}

.header_dh {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  flex-direction: row;
  background: white;
}

.header_dh .dw {
  width: 20%;
}

.header_dh ul {
  width: 80%;
  display: flex;
  flex-direction: row;
}

.header_dh ul li {
  justify-content: space-around;
  padding: 0 16px 0 16px;
  font-size: 0.32rem;
  font-weight: bold;
  color: black;
}

.fdj {
  width: 20%;
  background: url("../assets/fdj.png") no-repeat;
}
</style>